<template>
	<view class="detail">
		<index-header  color="#2a7a5a" title="特产详情" :hassearch="false"></index-header>
		<view class="detail-image">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../../static/uploadfiles/shaobing.jpg" mode="scaleToFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../../static/uploadfiles/shaobing2.jpg" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="detail-price">
			<view class="detail-price-now">
				￥26
			</view>
			<view class="detail-price-origin">
				￥39
			</view>
			<view class="detail-price-tag">
				特价
			</view>
			<view class="detail-price-share">
				<image src="../../../static/icon/share.svg" mode=""></image>
			</view>
		</view>
		<view class="detail-info">
			<view class="detail-info-title">
				黄山烧饼
			</view>
			<view class="detail-info-des">
				昱城黄山烧饼梅干菜扣肉饼酥饼零食网红小吃糕点安徽特色薄烧饼
			</view>
		</view>
		<view class="detail-coupon">
			<view class="detail-coupon-label">
				领券
			</view>
			<view class="detail-coupon-list">
				<text>￥200</text>
				<text>￥100</text>
				<text>￥500</text>
				<text>￥20</text>
			</view>
			<view class="detail-coupon-more">
				<image src="../../../static/icon/more.svg" mode=""></image>
			</view>
		</view>
		<view class="detail-selector">
			<view class="detail-coupon-label">
				已选
			</view>
			<view class="detail-selector-selected">
				咸香味  x1
			</view>
			<view class="detail-coupon-more">
				<image src="../../../static/icon/more.svg" mode=""></image>
			</view>
		</view>
		<view class="detail-intro">
			<view class="detail-intro-title">
				<text>产品介绍</text>
			</view>
			<view class="detail-intro-content">
				<image src="../../../static/uploadfiles/shaobing2.jpg" mode=""></image>
			</view>
			<view class="clearfix">
				
			</view>
		</view>
		<view class="fakefooter"></view>
		<cart-bar></cart-bar>
		
	</view>
</template>

<script>
	import indexHeader from '../../../components/indexHeader.vue'
	import cartBar from '../../../components/cartBar.vue'
	export default {
		components: {
			indexHeader,
			cartBar
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.detail {
	background-color: #fff;
	&-image {
		width: 750rpx;
		height: 600rpx;
		margin-top: 150rpx;
		swiper {
				height: 100%;
		}
	}
	&-price {
		margin: 40rpx 20rpx;
		display: flex;
		justify-content: space-around;
		&-now {
			color: #2a7a5a;
			font-size: 40rpx;
			margin-right: 20rpx;
		}
		&-origin {
			color: #a6a6a6;
			text-decoration: line-through;
			line-height: 60rpx;
			font-size: 20rpx;
			margin-right: 20rpx;
		}
		&-tag {
			width: 80rpx;
			height: 40rpx;
			font-size: 30rpx;
			color:#fff;
			background-color: #10ca7a;
			border-radius: 20rpx;
			font-size: 26rpx;
			text-align: center;
			line-height: 40rpx;
			margin-top: 5rpx;
			margin-left: 20rpx;
		}
		&-share {
			flex-grow: 1;
			image {
				width: 50rpx;
				height: 50rpx;
				display: block;
				float:right;
				margin-right: 20rpx;
			}
		}
	}
	&-info {
		margin: 0 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		&-title {
			font-size: 40rpx;
			font-weight: bold;
			color: #505050;
		}
		&-des {
			font-size: 26rpx;
			color: #505050;
			margin-top: 20rpx;
		}
	}
	&-coupon {
		margin: 40rpx 20rpx 20rpx;
		display: flex;
		justify-content: space-around;
		&-label {
			color: #808080;
			font-size: 36rpx;
		}
		&-list {
			display: flex;
			flex-grow: 1;
			text {
				margin-top: 5rpx;
				display: block;
				width: 80rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				text-align: center;
				color: #fff;
				background-color: #10ca7a;
				border-radius: 20rpx;
				margin-left: 20rpx;
			}
		}
		&-more {
			image {
				width: 50rpx;
				height: 50rpx;
				display: block;
				float:right;
				margin-right: 20rpx;
				transform: rotate(180deg);
			}
		}
	}
	&-selector {
		margin: 40rpx 20rpx 20rpx;
		display: flex;
		justify-content: space-around;
		&-selected {
			color: #505050;
			font-weight: bold;
			font-size: 36rpx;
			flex-grow: 1;
			margin-left: 20rpx;
		}
	}
	&-intro {
		width: 100%;
		margin-top: 40rpx;
		height: auto;
		&-title {
			height: 100rpx;
			border-bottom: 1rpx solid #505050;
			text {
				display: block;
				width: 500rpx;
				height: 100rpx;
				margin: 0 auto;
				line-height: 100rpx;
				font-size: 36rpx;
				text-align: center;				
				border-bottom: 3rpx solid #808080;
			}

		}
		&-content {
			margin-top: 40rpx;
			width: 100%;
			height: auto;
			image {
				width: 750rpx;
				height: 800rpx
			}
		}
	}
}
.swiper-item image {
	width: 100%;
	height: 850rpx;
}
.fakefooter {
	width: 100%;
	height: 150rpx;
}
.clearfix {
	clear: both;
}
</style>
